import type { ReactNode } from 'react'
import ThemeToggle from './ThemeToggle'

type PageHeaderProps = {
  title: string
  description?: string
  eyebrow?: string
  actions?: ReactNode
  rightSlot?: ReactNode
  className?: string
  withThemeToggle?: boolean
}

const PageHeader = ({ title, description, eyebrow, actions, rightSlot, className, withThemeToggle = true }: PageHeaderProps) => {
  return (
    <header className={`surface-card p-6 shadow-soft sm:p-7 ${className ?? ''}`}>
      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
          {eyebrow ? (
            <span className="inline-flex items-center gap-2 rounded-full border border-transparent bg-blush-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-blush-500">
              {eyebrow}
            </span>
          ) : null}
          <h1 className="mt-2 text-2xl font-semibold text-slate-900 sm:text-3xl">{title}</h1>
          {description ? <p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-500">{description}</p> : null}
        </div>
        <div className="flex items-center justify-end gap-2 overflow-hidden">
          {withThemeToggle ? <ThemeToggle /> : null}
          {rightSlot}
          {actions ? <div className="flex items-center gap-2 whitespace-nowrap">{actions}</div> : null}
        </div>
      </div>
    </header>
  )
}

export default PageHeader
